<template>
    <div>
        <header-footer :commonData="{$parent:$parent}">
            <div class="online_apply" v-cloak>
                <div class="crumb">
                    <ul>
                        <li class="color666 f_left">当前位置：</li>
                        <li>
                            <router-link class="color666 f_left" to="/home">首页></router-link>
                        </li>
                        <li class="color666 f_left">三类人员补考报名</li>
                    </ul>
                </div>
                <div class="border_content text_center">
                    <img src="/static/img/title1.png" class="contTitleImg">
                    <h3 class="apply_title">三类人员补考报名</h3>
                    <h4 class="apply_title_explain">请填写您的报名信息</h4>
                    <el-form class="apply_form" label-width="180px" style="width: 560px;">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{user.userName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{user.identity}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="公司名称：">
                            <p class="apply_p">{{form.companyName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="专业：">
                            <p class="apply_p">{{form.majorName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="成绩：">
                            <p class="apply_p">{{form.score}}分</p>
                        </el-form-item>
                        <el-form-item style="margin-left: -120px;" class="checkAgree">
                            <el-checkbox v-model="checkAgree">已阅读并同意遵守<span @click="changeAgree" class="applyxieyi">《考试报名信息协议》</span></el-checkbox>
                        </el-form-item>
                        <el-form-item class="apply_btns" v-if="!String.isEmptyOrNUll(form.id)">
                            <router-link class="apply_return" to="/study/apply/exam_apply">返回</router-link>
                            <a @click="onSubmit">确认提交</a>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </header-footer>
        <!-- 协议弹框 -->
        <el-dialog title="考试报名协议信息" class="userXuXieDialog" center :visible.sync="checkAgreeDialog">
            <div style="white-space: pre-wrap;" class="agreeCheckDialog">
                <userXieyi></userXieyi>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" class="xieyiBtn" @click="checkAgreeDialog = false">我已阅读并同意</el-button>
            </span>
        </el-dialog>
        <!-- 用户须知 -->
        <el-dialog title="三类人员个人考试报名须知" class="userXuXieDialog" center :visible.sync="userXuDialog">
            <div style="white-space: pre-wrap;" class="agreeCheckDialog">
                <slryPerson></slryPerson>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" class="xieyiBtn" @click="userXuDialog = false">我知道了</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    var _this;
    import headerFooter from '../../../components/cont_education/header_and_footer.vue'
    import userXieyi from '../../../components/userExamXuZhi/user_xieyi.vue'
    import slryPerson from '../../../components/userExamXuZhi/slry_person.vue'

    export default {
        name: "slry_apply",
        data: function() {
            return {
                userXuDialog: false, //用户须知
                checkAgreeDialog: false, //用户协议弹框
                checkAgree: false,
                dialogNoPay: false,

                user: {
                    identity: "",
                    userName: "",
                },
                form: {
                    educationBackground: '', //学历
                    professionalTitle: '', //职称
                    productCode: ""
                },
                currentApply: undefined,
            }
        },
        beforeCreate: function() {
            _this = this;
        },
        mounted: function() {
            this.common.post(this.api.getCombApply, {}, function(res) {
                var info = res.resultMap;
                _this.user.userName = info.realName;
                _this.user.identity = info.identityCode;
                _this.userXuDialog = true;
            });

            this.common.post(this.api.getSlryResitList, {}, function(res) {
                if (!String.isEmptyOrNUll(res.resultMap)) {
                    _this.form = res.resultMap;
                } else {
                    _this.$message({
                        message: '当前暂无补考报名信息',
                        duration: 0,
                        showClose: true,
                        type: 'error'
                    })
                }
            });
        },
        methods: {
            changeAgree: function() {
                this.checkAgreeDialog = true;
            },
            // 报名提交
            onSubmit: function(form) {
                if (!this.checkAgree) {
                    this.$message.error("请阅读并勾选报名协议！");
                    return;
                }
                this.common.post(this.api.slryapplyById, {
                    id: this.form.id
                }, function(res) {
                    _this.$message.success("报名成功");
                    _this.common.toPage("/cont_education/user/apply_info");
                });
            }
        },
        components: {
            headerFooter,
            userXieyi,
            slryPerson
        }
    }
</script>

<style>
    .el-checkbox {
        margin-right: 0;
    }

    .resitSelect input.el-input__inner {
        color: #666666 !important;
    }
</style>
